<template>
	<div class="search">
		<div class="search-header">
			<div class="input-wrapper">
				<img src="../assets/img/search1.png" class="img search-icon">
				<input type="text" class="search-input" placeholder="搜电影" v-model="keywords" @keyup="inputing"
					@keydown.enter="searching" />
			</div>
			<router-link class="cancel" to="/" tag="div">取消</router-link>
		</div>
		<component :is="cname" :keywords="keywords" :wordHistory="wordHistory" @delhot="delhotword"
			@changekeyword="changeKeyword">
		</component>
	</div>
</template>

<script>
	import SearchHistory from '@/components/SearchHistory.vue'
	import SearchRuggest from '@/components/SearchRuggest.vue'
	import _ from 'lodash'
	export default {
		data() {
			return {
				cname: "SearchHistory",
				keywords: '',
				wordHistory: []
			}
		},
		components: {
			SearchHistory,
			SearchRuggest
		},
		mounted() {
			if (JSON.parse(localStorage.getItem("searchhistory"))) {
				this.wordHistory = JSON.parse(localStorage.getItem("searchhistory"));
			}
		},
		methods: {
			inputing: _.debounce(function() {
				if (this.keywords.length < 1) {
					this.cname = "SearchHistory"
				} else {
					this.cname = "SearchRuggest"
				}
			}, 500),

			searching(event) {
				this.cname = "SearchRuggest";
				this.setHistory();
				event.target.blur();
			},

			setHistory() {
				if (!this.wordHistory.includes(this.keywords)) {
					this.wordHistory.unshift(this.keywords);
					localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
				} else {
					let i = this.wordHistory.indexOf(this.keywords);
					this.wordHistory.splice(i, 1);
					this.wordHistory.unshift(this.keywords);
					localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
				}
			},

			delhotword() {
				localStorage.setItem("searchhistory", JSON.stringify(this.wordHistory));
			},

			changeKeyword(keyword) {
				this.keywords = keyword;
				this.setHistory();
				this.cname = "SearchRuggest"
			},
		}
	}
</script>

<style scoped lang="less">
	.search {
		margin-top: 96px;
		background-color: #f5f5f5;
		height: 100vh;
	}

	.search-header {
		display: flex;
		align-items: center;
		padding: 8px 0 8px 10px;
		background-color: #f5f5f5;
		border-bottom: 1px solid #e5e5e5;
		position: relative;
		z-index: 1;

		.input-wrapper {
			padding: 0 10px;
			border: 1px solid #e6e6e6;
			border-radius: 5px;
			background-color: #fff;
			flex-grow: 1;
		}

		.search-icon {
			width: 15px;
			height: 15px;
			margin-right: 6px;
			float: left;
			position: relative;
			top: 6px;
			background: none;
		}

		.search-input {
			flex: 1;
			border: none;
			font-size: 13px;
			color: #333;
			line-height: 20px;
			padding: 4px 0;
			width: calc(100% - 40px);
		}

		.cancel {
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
			font-size: 16px;
			color: #f03d37;
		}
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/search1.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
